<template>
	<view class="">
		<view class="btn" :class="{ 'btn-hidden': isBtnHidden, [initClass]: true }" :style="[mergePositionStyle, animationBaseStyle]">
			<!-- 编辑按钮：单个class -->
			<view class="edit" @click="handleContactPage">
				<uni-icons type="compose" size="30"></uni-icons>
			</view>

			<!-- 主按钮容器：单个class -->
			<view class="own-container">
				<view class="menu-options" v-if="isExpanded" :class="{ 'menu-options-expanded': isExpanded }">
					<!-- 无管家时的菜单文本 -->
					<view class="menu-no-linlier" v-if="!hasLinlier" @click="regOwn">
						<text class="own-chao-txt">管家募招中...</text>
						</view>
					<!-- 有管家时的菜单项：单个class + 序号class（替代nth-child） -->
					<view class="menu-item menu-item-1" v-if="hasLinlier" :class="{ 'menu-item-expanded': isExpanded }" @click="handleMenuClick('1')">
						<uni-icons type="cart" size="32" color="#ffaa00"></uni-icons>
					</view>
					<view class="menu-item menu-item-2" v-if="hasLinlier" :class="{ 'menu-item-expanded': isExpanded }" @click="handleMenuClick('2')">
						<uni-icons type="chat" size="32" color="#55aaff"></uni-icons>
					</view>
				</view>
				<!-- 有管家时的主按钮 -->
				<view class="own" v-if="hasLinlier">
					<view>
						<!-- 未展开：图片 -->
						<view class="own-normal" v-if="hasLinlier && !isExpanded">
							<image
								class="own-img"
								:src="linlier['userInfo.nicPic'].url"
								mode="aspectFill"
								@longpress="handleRecordShow"
								@click="toggleExpand"
								@touchend="handleRecordHide"
								@touchstart="touchstart"
								@touchmove.prevent="handleTouchMove"
							></image>
						</view>
						<!-- 展开：电话图标 -->
						<view class="own-expanded" v-if="hasLinlier && isExpanded">
							<uni-icons type="phone" size="40" color="#ffffff" @click="toggleExpand" @longpress.prevent="callLinlier(linlier.phone)"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 无管家时的主按钮 -->
				<view class="own no-linlier" v-if="!hasLinlier" @click="toggleExpand">
					<image class="no-own-img" src="/static/linlier/zaoping.png" mode="aspectFill"></image>
					<text class="own-txt">管家招聘</text>
					<!-- 单个class，替代.own .txt -->
				</view>
				<uni-badge text="" type=""></uni-badge>
			</view>
		</view>
		<record-manger :toTarget="toTarget" v-if="recordShow"></record-manger>
	</view>
</template>

<script>
const linlier = uniCloud.importObject('linlier', { customUI: true });
import recordManger from './recordManger.vue';
import setToTarget from '../utils/setTarget';
export default {
	name: 'mainBotton',
	components: {
		recordManger
	},
	props: {
		isBtnHidden: { type: Boolean, default: false },
		showType: {
			type: String,
			default: 'slide-up',
			validator: (val) => ['slide-up', 'fade-in', 'scale', 'custom'].includes(val)
		},
		animationDuration: { type: String, default: '0.3s' },
		customPosition: { type: Object, default: () => ({}) },
		customAnimationStyle: { type: Object, default: () => ({}) }
	},
	computed: {
		location() {
			return this.$store.state.msg.location;
		},
		cart(){
			return this.$store.state.cart
		},

		mergePositionStyle() {
			const defaultPos = { right: '50rpx', bottom: '80rpx' };
			return { ...defaultPos, ...this.customPosition };
		},
		// 动态生成初始class（替代.btn.slide-up-init/.scale-init）
		initClass() {
			if (this.showType === 'scale') return 'btn-scale-init';
			return 'btn-slide-up-init';
		},
		animationBaseStyle() {
			const baseStyle = {
				transition: `all ${this.animationDuration} ease-out`,
				opacity: this.isBtnHidden ? 0 : 1
			};
			if (this.isBtnHidden) {
				return { ...baseStyle, transform: 'translateY(200rpx)' };
			}
			switch (this.showType) {
				case 'fade-in':
					return { ...baseStyle, transform: 'translateY(0)' };
				case 'scale':
					return { ...baseStyle, transform: 'translateY(0) scale(1)' };
				case 'custom':
					return { ...baseStyle, ...this.customAnimationStyle };
				default:
					return { ...baseStyle, transform: 'translateY(0)' };
			}
		}
	},
	watch: {
		isBtnHidden: {
			handler(newVal) {
				if (!newVal) {
					this.isExpanded = false;
					this.$nextTick(() => this.animationBaseStyle);
				}
			},
			immediate: true
		},
		isExpanded: {
			handler(newval) {
				console.log('.....', newval, '+++++', this.hasLinlier);
			}
		},
		location:{
			handler(newval){
				this.getLinlier()
			}
		}
	},
	data() {
		return {
			isExpanded: false,
			hasLinlier: false,
			linlier: {},
			recordShow: false,
			startY: 0,
			toTarget: {}
		};
	},
	mounted() {
		this.getLinlier();
		this.$nextTick(() => this.animationBaseStyle);
	},
	methods: {
		async getLinlier() {
			try {
				if (!this.location) return;
				const res = await linlier.hasLinlier(this.location);
				console.log('管家信息', res);
				if (res.success) {
					this.hasLinlier = true;
					this.linlier = res.data;
					this.toTarget = {
						targetId: res.data.userId,
						targetType: '3',
						nicName: res.data.realName,
						nicPic: res.data['userInfo.nicPic'].url || ''
					};
				} else {
					this.hasLinlier = false;
				}
			} catch (e) {
				console.error(e);
			}
		},
		handleRecordHide() {
			uni.$emit('recordStart', false);
			this.recordShow = false;
		},
		handleContactPage() {
			uni.navigateTo({ url: '/pages/contactPage/contactPage' });
		},
		handleRecordShow() {
			console.log(this.toTarget);

			setToTarget('person', this.toTarget);
			this.recordShow = true;
		},
		toggleExpand() {
			this.isExpanded = !this.isExpanded;
			console.log(this.isExpanded);
		},
		callLinlier(phone) {
			console.log(phone);
			uni.makePhoneCall({ phoneNumber: phone });
		},
		touchstart(e) {
			this.startY = e.touches[0].pageY;
		},
		handleTouchMove(e) {
			// #ifndef APP-NVUE
			e.preventDefault();
			e.stopPropagation();
			//#endif
			const currentY = e.touches[0].pageY;
			uni.$emit('recordCancel', currentY - this.startY < -50);
		},
		handleTouchEnd(e) {
			uni.$emit('recordStart', false);
			this.recordShow = false;
		},
		handleMenuClick(option) {
			if (option === '1') {
				uni.navigateTo({ url: '/pages/shop/shop' });
			} else if (option === '2') {
				if (this.linlier.userId === this.$store.state.msg.user.userId) {
					uni.navigateTo({ url: '/own/ownAdmin/ownAdmin' });
				} else {
					const queryParam = { id: this.linlier.userId, type: 'person' };
					setToTarget('person', {
						targetId: this.linlier.userId,
						nicName: this.linlier.realName,
						nicPic: this.linlier['userInfo.nicPic'].url || ''
					});
					this.$store.commit('msg/SET_queryParam', queryParam);
					uni.navigateTo({ url: '/pages/messages/messages' });
				}
				this.isExpanded = false;
			}
		},
		regOwn() {
			uni.navigateTo({ url: '/pages/regLinlier/regLinlier' });
		}
	}
};
</script>

<style lang="scss">
.btn {
	position: fixed;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	color: #fff;
	opacity: 0;

	align-items: flex-end;
}

.btn-slide-up-init {
	transform: translateY(200rpx);
}

.btn-scale-init {
	transform: translateY(200rpx) scale(0);
}

.btn-hidden {
	transform: translateY(200rpx);
	opacity: 0;
}

.edit {
	display: flex; /* 替代block */
	align-items: center;
	justify-content: center;
	margin-right: 25rpx;
	height: 80rpx;
	width: 80rpx;
	border-radius: 40rpx;
	background-color: #fff;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);

	margin-bottom: 25rpx;
	transition: transform 0.2s ease-in-out;
}

.edit:active {
	transform: scale(0.9);
}

.btn-own {
	//	position: relative;
	display: flex;
	align-items: center; /* 垂直居中 */
	height: 120rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.menu-options {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 260rpx;
	height: 120rpx;
	margin-right: -60rpx;
	z-index: 90;
	background-color: #eaeaea;
	border-top-left-radius: 60rpx;
	border-bottom-left-radius: 60rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateX(20rpx); /* 左移隐藏 */
	/* NVUE 必须完整书写 transition 属性 */
	transition-property: transform, opacity;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	padding-right: 10rpx; /* 内部右间距，避免菜单项贴边 */
}

.menu-options-expanded {
	transform: translateX(0); /* 右移显示 */
	opacity: 1;
}
.menu-item-expanded {
	transform: scale(1);
}

.menu-no-linlier {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260rpx;
	height: 120rpx;
	color: #fff;
	font-size: 22rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60rpx;
	height: 60rpx;
	margin-left: 25rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.menu-item-1 {
	margin-left: 25rpx;
	transition-delay: 0.1s;
}

.menu-item-2 {
	margin-right: 15rpx; /* 右间距，贴近主按钮 */
	transition-delay: 0.2s;
}

.menu-item:active {
	transform: scale(0.9);
}
.own-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	height: 120rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.own {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	z-index: 120;
	overflow: hidden;
	padding: 0;
	border-radius: 60rpx;
	background-color: #55aaff;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease-in-out;
	 -weex-clip: rect;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}
.own-chao-txt{
	font-size: 28rpx;
	color: #55aaff;
}
.no-linlier {
	background-color: #55aaff;
}

.no-own-img {
	width: 70rpx;
	height: 70rpx;
	border-radius: 35rpx;
}
.own-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
}

.own-txt {
	font-size: 22rpx;
	margin-top: 8rpx;
	color: #fff;
}

.own:active {
	transform: scale(0.95);
}

.own-normal {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 有管家-展开状态：单个class */
.own-expanded {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: #55aa00;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}
</style>
